<template>
  <a-modal title="试验详情" width="70%" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
    <a-form-item label="试验版本" style="font-size: 18px; margin-left: 20px">
      <a-select v-model="selectedVersion" placeholder="请选择试验版本" @change="onVersionChange" style="width: 200px">
        <a-select-option value="">请选择试验版本</a-select-option>
        <a-select-option v-for="item in versionList" :key="item.experimentVersionId" :value="item.experimentVersionId">{{ item.experimentCtime }}</a-select-option>
      </a-select>
    </a-form-item>

    <div class="test_design_box">
      <div class="test_design_tab">
        <a-row :gutter="24">
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">试验ID：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.experimentNum }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">试验名称：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.fullName }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">试验全称：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.shortName }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">试验类型：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.experimentTypeName }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">研究类型：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.researchTypeName }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">申办方：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.bidName }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">数据合作方：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.dataPartnerName }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">试验时长：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.duration }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">试验宣传语：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.tagline }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24" class="test_design_tab_box">
            <span class="test_design_tab_box_title">试验描述：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.experimentDes }}</span>
          </a-col>
        </a-row>
        <p class="test_design_tab_wire" style="margin-top: -10px"/>
      </div>
      <div class="test_design_tab">
        <a-row :gutter="24">
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">支持平台：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.supportPlatform }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">受试者退出时是否保留受试者数据：</span>
            <span class="test_design_tab_box_text">{{ dataRetain }}</span>
          </a-col>
          <a-col :span="8" class="test_design_tab_box">
            <span class="test_design_tab_box_title">是否允许受试者重新加入试验：</span>
            <span class="test_design_tab_box_text">{{ rejoin }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24" class="test_design_tab_box">
            <span class="test_design_tab_box_title">警示语：</span>
            <span class="test_design_tab_box_text">{{ testDetailData.warnings }}</span>
          </a-col>
        </a-row>
        <p class="test_design_tab_wire" style="margin-top: -10px"/>
      </div>
      <div class="test_design_tab">
        <p class="create_form_item1_title"> 试验管理人员 </p>
        <a-table :columns="createFormManagersTable" :dataSource="testDetailData.managers" size="middle" :pagination="false" class="createForm1Table_box">
          <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
          <template slot="name" slot-scope="text">
            <a href="javascript:">{{ text }}</a>
          </template>
          <span slot="action" slot-scope="text, record, index" class="operation_button_box">
            <template>
              <a-button size="small" type="danger" @click="handleSub(record)" ghost>删除</a-button>
            </template>
          </span>
        </a-table>
        <p class="test_design_tab_font"/>
      </div>
      <div class="test_design_tab" v-if="countTasks.length>0">
        <p class="create_form_item1_title">计数任务 </p>
        <a-table :columns="createFormTasksTable" :dataSource="countTasks" size="middle" :pagination="false" class="createForm1Table_box">
          <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
          <template slot="name" slot-scope="text">
            <a href="javascript:">{{ text }}</a>
          </template>
        </a-table>
        <p class="test_design_tab_font"/>
      </div>
      <!--      <div class="test_design_tab" v-if="optionTasks.length>0">-->
      <!--        <p class="create_form_item1_title">选择任务 </p>-->
      <!--        <a-table :columns="createFormTasksTable" :dataSource="optionTasks" size="middle" :pagination="false" class="createForm1Table_box">-->
      <!--          <template slot="name" slot-scope="text">-->
      <!--            <a href="javascript:;">{{ text }}</a>-->
      <!--          </template>-->
      <!--        </a-table>-->
      <!--        <p class="test_design_tab_font"></p>-->
      <!--      </div>-->
      <div class="test_design_tab" v-if="questionTasks.length>0">
        <p class="create_form_item1_title"> 问卷任务 </p>
        <a-table :columns="createFormTasksTable" :dataSource="questionTasks" size="middle" :pagination="false" class="createForm1Table_box">
          <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
          <template slot="name" slot-scope="text">
            <a href="javascript:">{{ text }}</a>
          </template>
        </a-table>
        <!-- <p class="test_design_tab_font"></p> -->
      </div>
    </div>
    <template slot="footer" style="padding: 15px;">
      <a-button key="cancel" @click="handleCancel">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
// import pick from 'lodash.pick'
import { getTestVersionList, getTestVersionDetail } from '@/api/manage'
const stepForms = [
  ['name', 'desc'],
  ['target', 'template', 'type'],
  ['time', 'frequency']
]

export default {
  name: 'StepByStepModal',
  // props: {
  //   testDetailData: {
  //     default: ''
  //   }
  // },
  data () {
    return {
      testDetailData: '',
      // testDetail: '',
      versionList: '',
      countTasks: [],
      // optionTasks: [],
      questionTasks: [],
      selectedVersion: '',
      dataRetain: '否',
      rejoin: '否',
      // tab2 表格
      createFormManagersTable: [
        {
          title: '序号',
          // dataIndex: 'id',
          align: 'center',
          scopedSlots: { customRender: 'serial' },
          width: '25%' // ,
          // scopedSlots: {
          //   customRender: 'name'
          // }
        },
        {
          title: '账户',
          dataIndex: 'accountName',
          width: '37%',
          align: 'center'
        },
        {
          title: '角色',
          dataIndex: 'roleName',
          width: '38%',
          align: 'center'
        }
      // ]
      // tab2 表格数据
      // createFormData: [{
      //   key: '1',
      //   name: 'John Brown',
      //   age: 32,
      //   address: 'New York No. 1 Lake Park',
      //   tags: ['nice', 'developer']
      // },
      // {
      //   key: '2',
      //   name: 'Jim Green',
      //   age: 42,
      //   address: 'London No. 1 Lake Park',
      //   tags: ['loser']
      // }
        // {
        //   key: '3',
        //   name: 'Joe Black',
        //   age: 32,
        //   address: 'Sidney No. 1 Lake Park',
        //   tags: ['cool', 'teacher'],
        // },
      ],
      // 表格4 计数表格
      createFormTasksTable: [{
        title: '序号',
        // dataIndex: 'id',
        align: 'center',
        scopedSlots: { customRender: 'serial' },
        width: '25%' // ,
        // scopedSlots: {
        //   customRender: 'name'
        // }
      },
      {
        title: '名称',
        dataIndex: 'taskName',
        width: '25%',
        align: 'center'
      },
      {
        title: '类型',
        dataIndex: 'taskTypeName',
        width: '25%',
        align: 'center'
      },
      {
        title: '频率',
        dataIndex: 'taskFrequencyName',
        width: '25%',
        align: 'center'
      }
      ],
      // 表格4 计数数据
      // createForm4CountData: [{
      //   key: '1',
      //   name: 'John Brown',
      //   aa: 'John Brown',
      //   bb: 'John Brown',
      //   cc: 'John Brown',
      //   age: 32,
      //   address: 'New York No. 1 Lake Park',
      //   tags: ['nice', 'developer']
      // },
      // {
      //   key: '1',
      //   name: 'John Brown',
      //   aa: 'John Brown',
      //   bb: 'John Brown',
      //   cc: 'John Brown',
      //   age: 32,
      //   address: 'New York No. 1 Lake Park',
      //   tags: ['nice', 'developer']
      // }
      // ],
      // 表格4 问卷表格
      // createForm4QuestionnaireTable: [{
      //   title: '账户',
      //   dataIndex: 'name',
      //   width: '20%',
      //   // align: 'center',
      //   scopedSlots: {
      //     customRender: 'name'
      //   }
      // },
      // {
      //   title: '名称',
      //   dataIndex: 'aa',
      //   width: '20%',
      //   align: 'center'
      // },
      // {
      //   title: '类型',
      //   dataIndex: 'bb',
      //   width: '20%',
      //   align: 'center'
      // },
      // {
      //   title: '频率',
      //   dataIndex: 'cc',
      //   width: '20%',
      //   align: 'center'
      // }
      // ],
      // 表格4 问卷数据
      // createForm4QuestionnaireData: [
      //
      //   {
      //     key: '1',
      //     name: 'John Brown',
      //     aa: 'John Brown',
      //     bb: 'John Brown',
      //     cc: 'John Brown',
      //     age: 32,
      //     address: 'New York No. 1 Lake Park',
      //     tags: ['nice', 'developer']
      //   },
      //   {
      //     key: '1',
      //     name: 'John Brown',
      //     aa: 'John Brown',
      //     bb: 'John Brown',
      //     cc: 'John Brown',
      //     age: 32,
      //     address: 'New York No. 1 Lake Park',
      //     tags: ['nice', 'developer']
      //   }
      // ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,
      currentStep: 0,
      mdl: {},

      form: this.$form.createForm(this)
    }
  },
  created () {
    // this.getTestVersionList()
  },
  methods: {
    onVersionChange () {
      if (this.selectedVersion) {
        const param = {
          experimentVersionId: this.selectedVersion
        }
        this.getTestVersionDetail(param)
      }
    },
    getTestVersionDetail (param) {
      if (!param) {
        return
      }

      getTestVersionDetail(param).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message)
          this.testDetailData = res.data
          this.dataRetain = this.testDetailData.dataRetain === 1 ? '是' : '否'
          this.rejoin = this.testDetailData.rejoin === 1 ? '是' : '否'
          this.questionTasks.length = 0
          this.countTasks.length = 0
          if (this.testDetailData.tasks && this.testDetailData.tasks.length > 0) {
            for (const i in this.testDetailData.tasks) {
              if (this.testDetailData.tasks.hasOwnProperty(i)) {
                const task = this.testDetailData.tasks[i]
                if (task.taskType === 1) {
                  this.countTasks.push(task)
                // } else if (task.taskType === 3) {
                //   this.optionTasks.push(task)
                } else { // } if (task.taskType === 4) {
                  this.questionTasks.push(task)
                }
              }
            }
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getTestVersionList (id) {
      if (!id) {
        return
      }

      const param = {
        experimentId: id
      }
      getTestVersionList(param).then(res => {
        if (res.code === 200) {
          this.versionList = res.data
        }
      })
    },
    edit (record) {
      this.visible = true
      this.countTasks.length = 0
      this.selectedVersion = ''
      this.questionTasks.length = 0
      if (!record) {
        return
      }

      this.getTestVersionList(record.id)

      // this.testDetailData = record
      // const { form: { setFieldsValue } } = this
      // this.$nextTick(() => {
      //   setFieldsValue(pick(record, []))
      // })
      const param = {
        experimentId: record.id
      }
      this.getTestVersionDetail(param)
    },
    handleNext (step) {
      const { form: { validateFields } } = this
      const currentStep = step + 1
      if (currentStep <= 2) {
        // stepForms
        validateFields(stepForms[this.currentStep], (errors) => {
          if (!errors) {
            this.currentStep = currentStep
          }
        })
        return
      }
      // last step
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          setTimeout(() => {
            this.confirmLoading = false
            this.$emit('ok', values)
          }, 1500)
        } else {
          this.confirmLoading = false
        }
      })
    },
    backward () {
      this.currentStep--
    },
    handleCancel () {
      // clear form & currentStep
      this.visible = false
      this.currentStep = 0
    }
  }
}
</script>
<style lang="less">
.test_design_box {
  margin: 0 23px 23px 23px;
  .ant-empty-normal {
    margin: 0;
  }
}

.test_design_tab {
  .test_design_tab_wire {
    margin: 30px 0;
    height: 1px;
    background: rgba(232, 232, 232, 1);
  }

  .test_design_tab_font {
    margin-top: 30px;
  }
  .test_design_tab_box {
    min-height: 55px;
    .test_design_tab_box_title {
      height: 24px;
      font-size: 16px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 24px;
    }
    .test_design_tab_box_text {
      height: 24px;
      font-size: 16px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 24px;
    }
  }
}
</style>
